<template>
  <div class="address-group">
    <el-select class="address-input" v-model="province" placeholder="全部" :style="seletStyle">
      <el-option
        v-for="item in provinceList"
        :key="item.id ? item.id : Math.random()*1000"
        :label="item.areaName"
        :value="item.id"
      />
    </el-select>
    <el-select class="address-input" v-model="city" placeholder="全部" :style="seletStyle">
      <el-option
        v-for="item in cityList"
        :key="item.id ? item.id : Math.random()*1000"
        :label="item.areaName"
        :value="item.id"
      />
    </el-select>
    <el-select
      class="address-input"
      v-model="country"
      placeholder="全部"
      :style="seletStyle"
      v-show="isDistrict"
    >
      <el-option
        v-for="item in countryList"
        :key="item.id ? item.id : Math.random()*1000"
        :label="item.areaName"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
// 三级联动
import { areaProvince } from "data/listBody";
import queryList from "utils/queryList";
let changePower = true;
export default {
  name: "userAddress",
  props: {
    seletStyle: {
      default: function() {
        return {};
      }
    },
    defaultValue: {
      default: function() {
        return {};
      },
      type: Object
    },
    isDistrict: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      provinceList: [],
      cityList: [],
      countryList: [],
      province: "",
      city: "",
      country: ""
    };
  },
  mounted() {
    this.handleProvince();
  },
  methods: {
    addressAddAll(arry) {
      //地址添加全部
      let param = {
        areaCode: "",
        id: "",
        parentId: "",
        areaName: "全部"
      };
      arry.unshift(param);
      return arry;
    },
    handleProvince() {
      //处理省份
      let areaProvinces = JSON.parse(JSON.stringify(areaProvince));
      this.provinceList = this.addressAddAll(areaProvinces);
    },
    handleData(num, msg, callback) {
      //处理城市和地区
      if (!num) return;
      queryList("area", { parentId: num })
        .then(res => {
          if ((res.data.code = this.ok)) {
            let datas = res.data.data;
            datas = this.addressAddAll(datas);
            if (callback) callback(datas);
            if (msg === "province") return (this.cityList = datas);
            return (this.countryList = datas);
          }
          this.$message("系统繁忙，请稍后再试");
        })
        .catch(err => {
          console.log(err);
          this.$message("系统繁忙，请稍后再试!");
        });
    },
    getData() {
      let checkProvince = this.provinceList.filter(item => {
        return this.province === item.id;
      });
      let checkCity = this.cityList.filter(item => {
        return this.city === item.id;
      });
      let checkCountry = this.countryList.filter(item => {
        return this.country === item.id;
      });

      let province = checkProvince.length > 0 ? checkProvince[0].areaCode : "";
      let city = checkCity.length > 0 ? checkCity[0].areaCode : "";
      let country = checkCountry.length > 0 ? checkCountry[0].areaCode : "";

      let params = {
        province,
        city,
        country,
        checkProvince,
        checkCity,
        checkCountry
      };
      return params;
    }
  },
  watch: {
    defaultValue() {
      if (this.defaultValue) {
        const { province, city, country } = this.defaultValue;
        changePower = false;

        // 省份初始化
        if (!province) return (changePower = true);
        let provinceArray = this.lodash.filter(this.provinceList, item => {
          return item.areaCode == province;
        });
        this.province = provinceArray[0].id;

        // 城市初始化
        queryList("area", { parentId: this.province }).then(res => {
          if ((res.data.code = this.ok)) {
            this.cityList = res.data.data;
            if (!city) return (changePower = true);
            let cityArray = this.lodash.filter(this.cityList, item => {
              return item.areaCode == city;
            });
            this.city = cityArray[0].id;

            //地区初始化
            queryList("area", { parentId: this.city }).then(res => {
              if ((res.data.code = this.ok)) {
                this.countryList = res.data.data;
                if (!country) return (changePower = true);
                let countryArray = this.lodash.filter(
                  this.countryList,
                  item => {
                    return item.areaCode == country;
                  }
                );
                this.country = countryArray[0].id;
                changePower = true; //打开切换开关
              }
            });
          }
        });
      }
    },
    province: function(curVal, oldVal) {
      if (!changePower) return;
      this.cityList = [];
      this.countryList = [];
      this.city = "";
      this.country = "";
      this.handleData(curVal, "province");
      this.$emit("countryChange", this.getData());
    },
    city: function(curVal, oldVal) {
      if (!changePower) return;
      this.countryList = [];
      this.country = "";
      this.handleData(curVal, "city");
      this.$emit("countryChange", this.getData());
    },
    country: function(curVal, oldVal) {
      this.$emit("countryChange", this.getData());
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./../assets/less/color.less");
.address-group {
  display: flex;
  .address-input {
    margin-right: 20px;
    width: 210px;
    &.last-child {
      margin-right: 0;
    }
  }
}
</style>